<template>
    <el-dialog
            title="自定义字段"
            :visible.sync="visible"
            width="800px"
            @close="onClose"
            :close-on-click-modal="false"
            :before-close="closeEditField"
    >
        <el-form
                :model="fieldForm"
                :rules="fieldRules"
                ref="fieldRuleForm"
                label-width="120px"
                class="demo-ruleForm"
                style="width: 400px; margin: 0 auto"
                size="small"
        >
            <el-form-item label="字段标识" prop="field_key">
                <tooltipLable
                        slot="label"
                        label="字段标识"
                        content="请输入字段的标识,要求英文字母及下划线组成，以字母开头，且不得使用工单基础字段如(sn、title、state_id等字符)"
                ></tooltipLable>
                <el-input v-model="fieldForm.field_key"></el-input>
            </el-form-item>
            <el-form-item label="字段名称" prop="field_name">
                <tooltipLable
                        slot="label"
                        label="字段名称"
                        content="请输入字段的名称，建议中文，如请假原因、服务器规格等"
                ></tooltipLable>
                <el-input v-model="fieldForm.field_name"></el-input>
            </el-form-item>
            <el-form-item label="字段描述" prop="description">
                <tooltipLable
                        slot="label"
                        label="字段描述"
                        content="字段描述信息将显示在工单详情的该字段下方"
                ></tooltipLable>
                <el-input v-model="fieldForm.description"></el-input>
            </el-form-item>
            <el-form-item label="字段类型" prop="field_type_id">
                <el-select
                        v-model="fieldForm.field_type_id"
                        placeholder="请选择"
                        class="full-width"
                >
                    <el-option
                            v-for="item in fieldTypeList"
                            :key="item.field_type_id"
                            :label="item.name"
                            :value="item.field_type_id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="顺序id" prop="order_id">
                <tooltipLable
                        slot="label"
                        label="顺序id"
                        content="工单详情中字段排列顺序。值越小，越靠前,内置字段顺序为: sn:10, title:20, state_id:40, state.state_name:41,participant_info.participant_name:50, participant_info.participant_alias:55,workflow.workflow_name:60,creator:80,gmt_created:100, gmt_modified:120"
                ></tooltipLable>
                <el-input v-model.number="fieldForm.order_id"></el-input>
            </el-form-item>
            <el-form-item label="默认值" prop="default_value">
                <tooltipLable
                        slot="label"
                        label="默认值"
                        content="新建工单时，作为该字段的默认值"
                ></tooltipLable>
                <el-input v-model="fieldForm.default_value"></el-input>
            </el-form-item>
            <el-form-item label="布尔显示定义" prop="boolean_field_display">
                <tooltipLable
                        slot="label"
                        label="布尔显示定义"
                        content='当为布尔类型时候，可以支持自定义显示形式。{"1":"是","0":"否"}或{"1":"需要","0":"不需要"}，注意数字也需要引号'
                ></tooltipLable>
                <el-input v-model="fieldForm.boolean_field_display"></el-input>
            </el-form-item>
            <el-form-item label="选项" prop="field_choice">
                <tooltipLable
                        slot="label"
                        label="默认值"
                        content='radio,checkbox,select,multiselect类型可供选择的选项，格式为json如:{"1":"中国", "2":"美国"},注意数字也需要引号'
                ></tooltipLable>
                <el-input v-model="fieldForm.field_choice"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="label">
                <tooltipLable
                        slot="label"
                        label="标签"
                        content="自定义标签，json格式，调用方可根据标签自行处理特殊场景逻辑，loonflow只保存文本内容"
                ></tooltipLable>
                <el-input v-model="fieldForm.label"></el-input>
            </el-form-item>
            <el-form-item label="模板" prop="field_template">
                <tooltipLable
                        slot="label"
                        label="模板"
                        content="文本域类型字段前端显示时可以将此内容作为字段的placeholder或默认值"
                ></tooltipLable>
                <el-input v-model="fieldForm.field_template"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="closeEditField">取 消</el-button>
      <el-button type="primary" @click="submitField()">确 定</el-button>
    </span>
    </el-dialog>
</template>
<script>
    import tooltipLable from "@/components/workflows/tooltipLable";
    import api from "@/api/index";

    export default {
        components: {
            tooltipLable
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            row: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data() {
            const checkJson = (rule, value, callback) => {
                try {
                    JSON.parse(value);
                } catch (e) {
                    //console.log("json 格式错误");
                    callback(new Error("json格式错误"));
                }
                callback();
            };
            return {
                fieldId: null,
                fieldForm: {
                    field_name: "",
                    field_key: "",
                    field_type_id: null,
                    description: "",
                    order_id: null,
                    default_value: "",
                    boolean_field_display: "{}",
                    field_choice: "{}",
                    label: "{}",
                    field_template: ""
                },
                //校验规则
                fieldRules: {
                    field_key: [
                        {required: true, message: "请输入字段标识", trigger: "blur"}
                    ],
                    field_name: [
                        {required: true, message: "请输入字段名称", trigger: "blur"}
                    ],
                    field_type_id: [
                        {required: true, message: "请选择一个字段类型", trigger: "blur"}
                    ],
                    order_id: [
                        {
                            required: true,
                            message: "请输入顺序id",
                            trigger: "blur"
                        },
                        {type: "number", message: "id必须为数字"}
                    ],

                    boolean_field_display: [
                        {
                            validator: checkJson,
                            message: "格式不正确，需要是字典的的json格式"
                        }
                    ],
                    field_choice: [
                        {
                            validator: checkJson,
                            message: "格式不正确，需要是字典的的json格式"
                        }
                    ],
                    label: [
                        {
                            validator: checkJson,
                            message: "格式不正确，需要是字典的的json格式"
                        }
                    ]
                },
                //字段类型
                fieldTypeList: [
                    {field_type_id: 5, name: "字符串"},
                    {field_type_id: 10, name: "整型"},
                    {field_type_id: 15, name: "浮点型"},
                    {field_type_id: 20, name: "布尔"},
                    {field_type_id: 25, name: "日期"},
                    {field_type_id: 30, name: "日期时间"},
                    {field_type_id: 35, name: "单选框"},
                    {field_type_id: 40, name: "多选框"},
                    {field_type_id: 45, name: "下拉列表"},
                    {field_type_id: 50, name: "多选下拉列表"},
                    {field_type_id: 55, name: "文本域"},
                    {field_type_id: 58, name: "富文本"},
                    {field_type_id: 60, name: "用户"},
                    {field_type_id: 70, name: "多选用户"},
                    {field_type_id: 80, name: "附件"}
                ]
            };
        },
        created() {
            this.getEditData();
        },
        watch: {},
        methods: {
            getEditData() {
                let data = this.row;
                if (data.id) {
                    let obj = {};
                    obj.field_name = data.field_name;
                    obj.field_key = data.field_key;
                    obj.field_type_id = data.field_type_id;
                    obj.description = data.description;
                    obj.order_id = data.order_id;
                    obj.default_value = data.default_value;
                    obj.boolean_field_display = data.boolean_field_display;
                    obj.field_choice = data.field_choice;
                    obj.label = data.label;
                    obj.field_template = data.field_template;
                    this.fieldId = data.id;
                    obj.boolean_field_display = JSON.stringify(data.boolean_field_display);
                    obj.field_choice = JSON.stringify(data.field_choice);
                    obj.label = JSON.stringify(data.label);
                    this.$nextTick(function () {
                        this.fieldForm = obj;
                    });
                } else {
                    this.fieldId = null;
                }
            },
            onClose() {
                this.$refs["fieldRuleForm"].resetFields();
            },
            //关闭编辑字段弹窗
            closeEditField() {
                this.$emit("update:visible", false);
            },
            //提交字段数据
            submitField() {
                //  this.fieldForm.order_id = parseInt(this.fieldForm.order_id);
                //console.log(this.$refs.fieldRuleForm);
                this.$refs.fieldRuleForm.validate(valid => {
                    if (valid) {
                        if (this.fieldId != null) {
                            api.editAllField(this.fieldId, this.fieldForm).then(res => {
                                this.msgSuccess("编辑成功!");
                                this.closeEditField();
                                this.$emit("reloadList");
                            });
                        } else {
                            api.addAllField(this.fieldForm).then(res => {
                                    this.msgSuccess("添加成功!");
                                    this.closeEditField();
                                    this.$emit("reloadList");
                            });
                        }
                    } else {
                        //console.log("error submit!!");
                        return false;
                    }
                });
            }
        }
    };
</script>
